/* styles.css */

/* 侧边栏样式 */
.sidebar-item {
    @apply flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-all duration-200;
}

.sidebar-item.active {
    @apply bg-primary/10 text-primary border-l-4 border-primary;
}

/* 卡片阴影效果 */
.card-shadow {
    @apply shadow-md hover:shadow-lg transition-shadow duration-300;
}

/* 自定义工具类 */
.content-auto {
    content-visibility: auto;
}

/* 页面加载指示器 */
.page-loader {
    @apply fixed inset-0 bg-white bg-opacity-80 flex items-center justify-center z-50;
}

.page-loader .spinner {
    @apply inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary;
}

/* 表格样式优化 */
.table-hover tr:hover {
    @apply bg-gray-50;
}

/* 导航栏下拉菜单 */
.dropdown-menu {
    @apply absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 hidden;
}

.dropdown:hover .dropdown-menu {
    @apply block;
}

/* 按钮样式 */
.btn {
    @apply px-4 py-2 rounded-md transition-colors duration-200;
}

.btn-primary {
    @apply bg-primary text-white hover:bg-primary/90;
}

.btn-danger {
    @apply bg-danger text-white hover:bg-danger/90;
}

.btn-warning {
    @apply bg-warning text-white hover:bg-warning/90;
}

.btn-success {
    @apply bg-success text-white hover:bg-success/90;
}

/* 表单元素样式 */
.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary;
}

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary;
}

/* 分页控件样式 */
.pagination {
    @apply flex items-center justify-between mt-6;
}

.pagination .page-item {
    @apply px-3 py-1 border border-gray-300 rounded-md hover:bg-gray-50;
}

.pagination .page-item.active {
    @apply bg-primary text-white;
}

/* 状态标签样式 */
.status-tag {
    @apply px-2 py-1 rounded-full text-xs font-medium;
}

.status-tag-success {
    @apply bg-green-100 text-green-700;
}

.status-tag-danger {
    @apply bg-red-100 text-red-700;
}

.status-tag-warning {
    @apply bg-yellow-100 text-yellow-700;
}

.status-tag-info {
    @apply bg-blue-100 text-blue-700;
}